<template>
  <svg
    class="svg-icon"
    :class="{ active }"
    :style="{ width: `${width}rem`, height: `${height}rem`, fill: active ? activeFill : fill }"
    @click="onclick"
  >
    <use :href="`#${icon}`" />
  </svg>
</template>

<script>
// 引入字体库
import './iconfont'
export default {
  props: {
    active: {
      type: Boolean,
      default: false
    },
    icon: {
      type: String,
      default: 'icon-yingyuan'
    },
    fill: {
      type: String,
      default: '#646566'
    },
    activeFill: {
      type: String,
      default: '#ff5f16'
    },
    width: {
      type: Number,
      default: .5867
    },
    height: {
      type: Number,
      default: .5867
    }
  },
  methods: {
    onclick() {
      this.$emit('clickIcon', '123')
    }
  }
}
</script>

<style lang="scss" scoped>
.svg-icon {
}
</style>
